import React, { Component } from 'react'
// import { EllipsisOutlined } from '@ant-design/icons';
import { List, Card, Avatar, Skeleton } from 'antd';
import pupsub from 'pubsub-js'

export default class UserList extends Component {
  state = {
    userList: [],
    isLoading: false
  }

  componentDidMount = () => {
    this.pupsubId_userList = pupsub.subscribe('updateData', (eventName, data) => {
      // console.log('subscribe', data);
      this.setState({ userList: data.items })
    })
    this.pupsubId_isLoading = pupsub.subscribe('updateLoading', (eventName, data) => {
      this.setState({ isLoading: data })
    })
  }
  componentWillUnmount = () => {
    pupsub.unsubscribe(this.pupsubId_userList) //用pupsub.subscribe返回的id来取消订阅事件
    pupsub.unsubscribe(this.pupsubId_isLoading)
  }

  onCheckMore = (item) => {
    return () => {
      window.open(item.html_url)
    }
  }

  render() {
    return (
      <Skeleton loading={this.state.isLoading} active>
        <List
          grid={{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }}
          dataSource={this.state.userList}
          renderItem={(item) => (
            <List.Item>
              <Card
                hoverable
                loading={false}
                onClick={this.onCheckMore(item)}
                style={{ width: 300, marginTop: 16, }}>
                <Card.Meta avatar={<Avatar src={item.avatar_url} />} title={item.login} />
              </Card>
            </List.Item>
          )}
        />
      </Skeleton>
    )
  }
}
